<template>
  <Modal v-model="show" width="1000" title="编辑主题">
    <ThemeForm
      ref="themeForm_ref"
      :form-data="formData"
      :disabled-list="disabledList"
      @on-theme-submit="handleThemeSubmit"
    ></ThemeForm>

    <template #footer>
      <div class="text-center">
        <Button class="ivu-btn--round ml14" @click="close">取消</Button>
        <Button class="ivu-btn--round" type="primary" @click="handleSave">保存</Button>
      </div>
    </template>
  </Modal>
</template>

<script>
// components
import ThemeForm from './ThemeForm.vue'

import { createForm } from './service'

// request
import { postThemeUpdate } from '@/api/manageEnd/theme/themeList.js'
export default {
  name: 'ModalEditTheme',

  components: { ThemeForm },

  props: {
    visible: Boolean,

    formData: Object,
  },

  computed: {
    show: {
      get() {
        return this.visible
      },
      set(v) {
        this.$emit('update:visible', v)
      },
    },

    disabledList() {
      return {
        themeName: true,
        time: true,
      }
    },
  },

  methods: {
    close() {
      this.show = false
    },

    handleSave() {
      this.$refs['themeForm_ref'].handleFormSubmit()
    },

    async handleThemeSubmit(data) {
      const formData = createForm()
      Object.keys(formData).forEach((key) => (formData[key] = data[key]))
      // console.log('handleThemeSubmit', data, formData)
      const res = await postThemeUpdate(data.id, data)
      const status = res.data.status
      if (status === 0) {
        this.$Message.success('编辑成功')
        this.$emit('on-edit-success')
        this.close()
      } else {
        this.$Message.error(res.data.message || '编辑失败，请稍后再试')
      }
    },
  },
}
</script>

<style lang="less" scoped></style>
